<template>
  <div class="goods">
    <ul class="menu-list">
      <li v-for="(item, index) in goods_list" :key="index">
        {{ item.name }}
      </li>
    </ul>
    <ul class="goods-list">
      <li
        v-for="(item, index) in goods_detail_list"
        :key="index"
        :class="item.class == 'title' ? 'list-title' : 'list-detail'"
      >
        <img v-if="!item.class" :src="item.image" alt="" class="img" />
        <div v-if="!item.class" class="info">
          <div class="name">{{ item.name }}</div>
          <div class="type">{{item.description}}</div>
          <div class="sell"><span>月售{{item.rating}}分</span></div>
          <div class="price"><span class="f28 text-red">￥{{item.price}}</span><span>￥{{item.oldPrice}}</span></div>
          <div class="abs-num">
            <v-number></v-number>
          </div>
        </div>
        <div v-else>{{ item.name }}</div>
      </li>
    </ul>
  </div>
</template>
<script>
import { ApiGetMain } from "@/api";
import vNumber from '@/components/vNumber';
console.log(vNumber)
export default {
  name: "goods",
  data() {
    return {
      goods_list: [],
      goods_detail_list: []
    };
  },
  created() {
    this.inti();
  },
  methods: {
    async getApiGoogsData() {
      await ApiGetMain("goods").then(res => {
        console.log(res);
        this.goods_list = res.data;
        //    this.goods_detail_list = res.data.map(item=>{
        //        console.log(item)
        //     //    for()
        //        return {name:item.name,class:'title'}
        //    })
        for (let item of res.data) {
          this.goods_detail_list.push({ name: item.name, class: "title" });
          for (let items of item.foods) {
            this.goods_detail_list.push(items);
          }
        }
      });
    },
    inti() {
      this.getApiGoogsData();
    }
  },
  components:{
    vNumber
  }
};
</script>
<style lang='less' scoped>
.goods {
  overflow: hidden;
  display: flex;
  .menu-list {
    // background: red;
    overflow-y: auto;
    height: 100%;
    width: 1.6rem;
    font-size: 0.24rem;
    li {
      width: 1.6rem;
      height: 1.06rem;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #f5f5f5;
    }
  }
  .goods-list {
    // background: green;
    overflow-y: auto;
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    .list-title {
      width: 100%;
      padding: 0 0.24rem;
      line-height: 0.52rem;
      height: 0.52rem;
      font-size: 0.24rem;
      color: #999;
      background: #f5f5f5;
      box-sizing: border-box;
      text-align: left;
    }
    .list-detail {
      width: 100%;
      padding: 0.36rem;
      display: flex;
      justify-content: flex-start;
      border-bottom:1px solid #f5f5f5;
      box-sizing: border-box;
      .img {
        width: 1rem;
        height: 1rem;
      }
      .info{
        flex:1;
        // display: flex;
        // flex-direction: column;
        // justify-content: space-between;
        // align-items: flex-start;
        position: relative;
        font-size: 0.2rem;
        line-height: 0.3rem;
        text-align: left;
        color: #999;
        margin-left: 0.2rem;
        span{
          margin-right:0.2rem;
        }
        .name{
          font-size: 0.28rem;
          line-height: 0.38rem;
          color: #333;
        }
        .abs-num{
          position: absolute;
          right:0;
          bottom:0;
        }
      }
    }
  }
}
</style>